<template>
<!--  <a-radio-group v-if="tagType=='radio'" @change="handleInput" :value="getValueSting" :disabled="disabled">-->
<!--    <a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio>-->
<!--  </a-radio-group>-->

<!--  <a-radio-group v-else-if="tagType=='radioButton'"  buttonStyle="solid" @change="handleInput" :value="getValueSting" :disabled="disabled">-->
<!--    <a-radio-button v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio-button>-->
<!--  </a-radio-group>-->

  <el-select :placeholder="placeholder" v-model="selectVal" :disabled="disabled" @change="handleInput">
    <el-option disabled value="请选择" label="请选择"></el-option>
    <el-option v-for="(item, key) in dictOptions" :key="item.value" :value="item.value" :label="item.text">
      <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
        {{ item.text || item.label }}
      </span>
    </el-option>
  </el-select>
</template>

<script>
  import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'

  export default {
    name: "DictSelectTag",
    props: {
      dictCode: String,
      placeholder: String,
      triggerChange: Boolean,
      disabled: Boolean,
      value: [String, Number],
      type: String
    },
    data() {
      return {
        dictOptions: [],
        tagType:"",
        selectVal:null
      }
    },
    watch:{
      value(val){
        this.selectVal = val;
      },
      dictCode:{
        immediate:true,
        handler() {
          this.initDictData()
          this.conventValue(this.value);
        },
      }
    },
    created() {
      // console.log(this.dictCode);
      if(!this.type || this.type==="list"){
        this.tagType = "select"
      }else{
        this.tagType = this.type
      }
      //获取字典数据
      // this.initDictData();
      // this.conventValue(this.value);
    },
    computed: {
      // getValueSting(){
      //   return this.value != null ? this.value.toString() : null;
      // },
    },
    methods: {
      conventValue(val){
        if(val && this.trim(val) != ""){
          if(!isNaN(this.trim(val))){
            this.dictValue = parseInt(this.trim(val));
          }else{
            this.dictValue = this.trim(val);
          }
        }else{
          this.dictValue = '';
        }
      },
      trim (str) {
        if(str){
          str =  str.toString();
          str = str.replace(/(^\s*)|(\s*$)/g, "");
          if(str && str != 0 && str.charCodeAt() == 0){
            str = ''
          }
          return str;
        }
        return "";
      },
      initDictData() {
        let that = this;
        //优先从缓存中读取字典配置
        if(getDictItemsFromCache(this.dictCode)){
          this.dictOptions = getDictItemsFromCache(this.dictCode);
          return
        }
        //根据字典Code, 初始化字典数组
        ajaxGetDictItems(this.dictCode, null).then((res) => {
          if (res.success) {
            this.dictOptions = res.data.map(item => {
              if(!isNaN(that.trim(item.value))){
                item.value = parseInt(that.trim(item.value));
              }
              return item;
            })
          }
        })
      },
      handleInput(e) {
        let val;
        if(this.tagType=="radio"){
          val = e.target.value
        }else{
          val = e
        }
        this.$emit("input",val);
        this.$emit("change",val);
      },
      setCurrentDictOptions(dictOptions){
        this.dictOptions = dictOptions.map(item => {
          if(!isNaN(that.trim(item.value))){
            item.value = parseInt(that.trim(item.value));
          }
          return item;
        })
      },
      getCurrentDictOptions(){
        return this.dictOptions
      }
    }
  }
</script>

<style scoped>
</style>
